<!--
 * new page
 * @author: xuaolei
 * @since: 2022-08-21
 * rank.vue
-->
<script setup lang="ts">
import { Headset, Star, ChatLineRound } from "@element-plus/icons-vue";
import { topListDetail, listDetail } from "@/api/rank";
import { formatSongs, formartDate, formartNum } from "@/utils/utils";
import { useHomeStore } from "@/stores/home/home";

const route = useRoute();
const router = useRouter();
const homeStore = useHomeStore();
const info: any = reactive({
  list: [],
  type: "Top",
  listTop: [],
  listFeature: [],
  listOther: [],
  rId: 0,
  rankInfo: {},
  songList: [],
  total: 0,
  isLoading: true,
});

// 获取当前选择的排行榜类型
const selectType = (type: string) => {
  info["type"] = type;
  info["list"] = info["list" + info.type];
  info["rId"] = info["list" + type][0].id;
};

// 获取排行榜列表
const getTopListDetail = () => {
  topListDetail().then((res: any) => {
    // 云音乐TOP榜
    info["listTop"] = res.list.filter((item: any) => {
      return item.ToplistType;
    });
    // 云音乐特色榜
    info["listFeature"] = res.list.filter((item: any) => {
      return !item.ToplistType && item.name.indexOf("云音乐") >= 0;
    });
    // 其他场景榜
    info["listOther"] = res.list.filter((item: any) => {
      return !item.ToplistType && item.name.indexOf("云音乐") < 0;
    });

    info["list"] = info.type ? info["list" + info.type] : info.listTop;
    info["rId"] = info.rId ? info.rId : info.listTop[0].id;
  });
};

// 获取歌曲列表详情
const getListDetail = async () => {
  info["isLoading"] = true;
  listDetail({ id: info.rId, s: -1 }).then((res: any) => {
    info["rankInfo"] = res.playlist;
    info["songList"] = formatSongs(res.playlist.tracks, res.privileges);
    info["total"] = info.songList.length;
    info["isLoading"] = false;
  });
};

// 切换排行榜类型
const selectItem = (item: any) => {
  info.rId = item.id;
  info["type"] = info.type;
};

// 播放全部歌曲
const playSongAll = () => {
  homeStore.playAll(info.songList);
  homeStore.SET_PLAYLISTTIPS(true);
};

onMounted(() => {
  info["type"] = route.query.type || info.type;
  info["rId"] = route.query.rId;
  getTopListDetail();
});

watchEffect(() => {
  if (info.rId) {
    getListDetail();
  }
});
</script>

<template>
  <div class="container" v-if="info.songList.length > 0">
    <div class="rank-info">
      <div class="rank-desc">
        <el-image :src="info.rankInfo.coverImgUrl"></el-image>
        <div class="info">
          <h2>
            {{ info.rankInfo.name }}
            <span
              >（ {{ formartDate(info.rankInfo.updateTime, "MM月dd日") }} 更新
              ）</span
            >
          </h2>
          <!-- 歌单头图 名称 -->
          <div class="cover-author">
            <el-image
              :src="info.rankInfo.creator.avatarUrl"
              style="height: 30px"
            ></el-image>
            <span>{{ info.rankInfo.creator.nickname }}</span>
            <span>{{
              formartDate(info.rankInfo.createTime, "yyyy-MM-dd")
            }}</span>
          </div>
          <!-- 歌单数据 -->
          <div class="cover-digital">
            <span>
              <el-icon :size="17">
                <Headset />
              </el-icon>
              {{ formartNum(info.rankInfo.playCount) }}次
            </span>
            <span>
              <el-icon :size="17">
                <Star />
              </el-icon>
              {{ formartNum(info.rankInfo.subscribedCount) }}
            </span>

            <span>
              <el-icon :size="17">
                <ChatLineRound />
              </el-icon>
              {{ formartNum(info.rankInfo.commentCount) }}
            </span>
          </div>

          <div class="cover-desc">
            <h4>歌单简介</h4>
            <p v-html="info.rankInfo.description"></p>
          </div>
        </div>
      </div>
      <!-- 歌曲 -->
      <div class="song-header">
        <h3>
          歌曲列表 <em>{{ info.total + "首歌" }}</em>
        </h3>
        <span class="play-all" @click="playSongAll"> 播放全部</span>
        <span :class="['collect', info.rankInfo.subscribed ? 'active' : '']">
          {{ info.rankInfo.subscribed ? "已收藏" : "收藏" }}
        </span>
      </div>
      <template v-if="info.isLoading">
        <Loading />
      </template>
      <template v-else>
        <song-list :songList="info.songList"></song-list>
      </template>
    </div>
    <div class="rank-type">
      <div class="aside-menu">
        <span
          :class="info.type === 'Top' ? 'active' : ''"
          @click="selectType('Top')"
          ><em style="font-style: normal">TOP榜</em></span
        >
        <span
          :class="info.type === 'Feature' ? 'active' : ''"
          @click="selectType('Feature')"
          ><em style="font-style: normal">特色榜</em></span
        >
        <span
          :class="info.type === 'Other' ? 'active' : ''"
          @click="selectType('Other')"
          ><em style="font-style: normal">场景榜</em></span
        >
      </div>
      <div class="type-main">
        <div
          class="type-item"
          :class="info.rId == item.id ? 'active' : ''"
          v-for="(item, index) in info.list"
          :key="index"
          @click="selectItem(item)"
        >
          <div class="item-info">
            <div class="item-title">
              {{ item.name }}
            </div>
            <div class="item-time">
              {{ item.updateFrequency }}
            </div>
          </div>
          <el-image class="item-img" :src="item.coverImgUrl">
            <div slot="placeholder" class="image-slot">
              <i class="iconfont icon-placeholder"></i>
            </div>
          </el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-flow: row nowrap;

  .rank-info {
    flex: 1;
    justify-content: space-around;

    .rank-desc {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-end;

      > .el-image {
        height: 200px !important;
        width: 200px !important;
        border-radius: 20px;
      }

      .info {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: flex-start;
        padding: 0px 20px;
        height: 200px;
        font-size: var(--el-font-size-base);

        h2 {
          span {
            font-weight: normal;
            font-size: var(--el-font-size-base);
            color: var(--el-color-info);
          }
        }

        .cover-author {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          font-size: var(--el-font-size-base);

          .el-image {
            border-radius: 50%;
          }

          span {
            color: var(--el-text-color-primary);
            margin-left: 10px;

            &:nth-of-type(2) {
              color: var(--el-color-info);
            }
          }
        }

        .cover-digital {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;

          span {
            font-size: var(--el-font-size-small);
            height: 20px;
            line-height: 20px;
            color: var(--el-color-info);
            margin-right: 20px;
          }
        }

        .cover-desc {
          p {
            color: var(--el-color-info);
            font-size: var(--el-font-size-small);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
            width: auto;
          }
        }
      }
    }
  }

  .rank-type {
    flex: 0 0;
    padding-left: 20px;

    .aside-menu {
      display: flex;
      position: relative;
      margin: 0 -10px 20px;
      overflow: hidden;

      span {
        flex: 1;
        display: flex;
        font-size: var(--el-font-size-base);
        align-items: center;
        position: relative;
        display: inline-block;
        padding: 20px;
        width: 90px;
        margin: 0 10px;
        text-align: center;
        background: var(--el-bg-color-page);
        border-radius: 12px;
        cursor: pointer;
        overflow: hidden;
        color: var(--el-text-color-primary);
        box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
        transition: color 0.2s ease-in;
        z-index: 5;
        height: 10px;
        line-height: 2px;
        &::before {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: -1;
          display: block;
          content: "";
          width: 100%;
          height: 0;
          background: var(--el-color-primary);
          transition: height 0.2s ease-in;
        }

        &.active {
          position: relative;
          color: #fff;
          transition: color 0.2s ease-in;

          &::before {
            height: 100%;
            transition: height 0.2s ease-in;
          }
        }

        .em {
          color: var(--el-text-color-primary);
          position: relative;

          z-index: 2;
        }
      }
    }
  }

  .song-header {
    display: flex;
    padding: 30px 0 10px;

    h3 {
      flex: 1;
      line-height: 40px;

      em {
        display: inline-block;
        padding-left: 10px;
        font-size: 12px;
        line-height: 14px;
        font-style: normal;
        font-weight: normal;
        color: #666;
        vertical-align: baseline;
      }
    }

    span {
      display: flex;
      line-height: 12px;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      padding: 7px 20px;
      cursor: pointer;
      font-size: var(--el-font-size-base);
      margin: 5px 0 5px 15px;
      transition: all 0.4s;
      background: var(--el-bg-color-page);
      color: var(--el-text-color-primary);

      i {
        margin-right: 3px;
      }
    }

    .play-all {
      color: var(--el-color-white);
      background: var(--el-color-primary);

      i {
        color: var(--el-bg-color);
      }
    }

    .collect.active,
    .collect.active i {
      color: var(--el-color-primary);
    }
  }

  .type-main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .type-item {
    display: flex;
    justify-content: space-between;
    width: 150px;
    padding: 10px 10px;
    margin: 10px 0px;
    background: var(--el-bg-color);
    border-radius: 12px;
    opacity: 0.8;
    cursor: pointer;
    box-shadow: 0 20px 27px rgb(0 0 0 / 5%);

    .item-info {
      flex: 1;
    }

    .item-img {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      margin-left: 10px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgb(0 0 0 / 12%);
    }

    .item-title {
      font-weight: bold;
      font-size: var(--el-font-size-base);
      line-height: 30px;
      display: inline-block;
      overflow: hidden;
      width: 70px;
      white-space: nowrap;
      text-overflow: ellipsis;
      vertical-align: top;
    }

    .item-time {
      line-height: 12px;
      font-size: var(--el-font-size-extra-small);
      color: var(--color-text);
    }

    &.active {
      opacity: 1;
      background: -moz-linear-gradient(
        -45deg,
        var(--el-bg-color) 20%,
        var(--el-color-primary) 100%
      );
      /* FF3.6-15 */
      background: -webkit-linear-gradient(
        -45deg,
        var(--el-bg-color) 20%,
        var(--el-color-primary) 100%
      );
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(
        135deg,
        var(--el-bg-color) 20%,
        var(--el-color-primary) 100%
      );
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    }
  }

  @media screen and (max-width: 1500px) {
    .rank-aside {
      width: 350px;
    }
  }
}
</style>
